<template>
  <view class="order-container">
    <u-tabs-swiper
      ref="tabs"
      :list="tabs"
      :is-scroll="false"
      font-size="26"
      bar-width="50"
      bar-height="2"
      active-color="#3745eb"
      :bold="false"
      :current="currentTab"
      @change="changeTab"
    ></u-tabs-swiper>
    <swiper
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item v-for="(item, index) in tabs" :key="index">
        <scroll-view
          scroll-y
          style="height: 90vh;width: 100%;"
          @scrolltolower="onreachBottom"
        >
          <view class="order-content" v-for="(item, i) in orderData" :key="i">
            <u-card
              :title="item.createTime"
              title-color="#ccc"
              title-size="22"
              :sub-title="{ 0: '待支付', 2: '已付款', 4: '报告已完成', 6: '已退款',8:'已退款',9:'已关闭' }[item.status]"
              sub-title-color="#f46c1e"
              :border="false"
              border-radius="0"
              margin="30rpx 0"
              :head-border-bottom="false"
              :foot-border-top="false"
              :foot-style="{ padding: 0 }"
              :body-style="{ padding: '0 30rpx' }"
            >
              <view class="card-body" slot="body">
                <u-gap height="1" bg-color="rgba(88, 88, 88, .1)"></u-gap>
                <view class="body-content">
                  <text>报告</text>
                  <text>¥{{ item.money }}</text>
                </view>
                <u-gap height="1" bg-color="rgba(88, 88, 88, .1)"></u-gap>
              </view>

              <view class="card-foot" slot="foot">
                <view class="foot-btn-box">
                  <u-button
                    type="primary"
                    size="mini"
                    shape="circle"
                    :custom-style="customStyle"
                    hover-class="none"
                    v-if="item.status !== 0"
                    @click="toReport(item)"
                    >查看报告</u-button
                  >
                  <u-button
                    type="primary"
                    size="mini"
                    shape="circle"
                    :custom-style="customStyle"
                    hover-class="none"
                    @click="toPay(item)"
                    v-if="item.status === 0"
                    >立即付款</u-button
                  >
                  <u-button
                    type="default"
                    size="mini"
                    shape="circle"
                    hover-class="none"
                    @click="onClickCance(i)"
                    v-if="item.status === 0"
                    >取消订单</u-button
                  >

                  <u-button
                    type="default"
                    size="mini"
                    shape="circle"
                    hover-class="none"
                    @click="toService"
                    >联系客服</u-button
                  >
                </view>
              </view>
            </u-card>
          </view>
          <view class="empty" v-show="isShowEmpty">
            <image
              style=""
              :mode="scaleToFill"
              src="./../../static/images/empty.png"
            ></image>
            <text>暂无数据</text>
          </view>
          <view class="go-select-box" v-show="isShowEmpty">
              <button class="go-select-btn" type="default" @click="onclickToApp">
                立即去查询信用>
              </button>
          </view>
          <view v-show="!isShowEmpty">
            <u-loadmore
              :status="loadStatus"
              :icon-type="iconType"
              :load-text="loadText"
            />
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <view>
      <u-modal
        v-model="showModal"
        show-cancel-button
        confirm-color="#3745eb"
        content="你确定要取消订单吗"
        @confirm="onConfirmCancelOrder"
      >
      </u-modal>
    </view>
  </view>
</template>

<script>
import { getOrderList, cancelOrder } from "@/api/order";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      tabs: [
        {
          name: "全部",
        },
        {
          name: "待付款",
        },
        {
          name: "已付款",
        },
        {
          name: "未过期",
        },
        {
          name: "已过期",
        },
      ],
      currentTab: 0,
      swiperCurrent: 0,
      // * 订单状态： 0-待付款， 2-已付款， 4-报告已生成， 6-已过期， 8-已退款, 9-已关闭
      orderStatus: null,
      // currentTab对应orderStatus
      status :{
        0: null,
        1: 0,
        2: 2,
        3: 4,
        4: 6,
      },
      // 当前订单id
      currenOrderID: "",
      // 上拉加载
      loadStatus: "nomore",
      iconType: "flower",
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "没有更多订单了",
      },
      customStyle: {
        backgroundColor: "#3745eb",
      },
      orderData: [],
      showModal: false,
      page: {
        current: 1,
        size: 10,
        total: 0,
        pages: 0,
      },
    };
  },
  computed: {
    // 为真时，显示empty图标
    isShowEmpty() {
      return this.orderData.length === 0;
    },
  },
  onLoad: function(option) {
    this.currentTab = option.currentTab
    this.orderStatus = this.status[option.currentTab]
    },
  mounted() {
    this.fetchOrderListSearch();
  },
  methods: {
    ...mapMutations("order", ["setInfoForm"]),
    fetchOrderListSearch() {
      const query = {
        appId: this.$store.state.Public.appId,
        ...this.$store.state.user.user,
        ...this.page,
        status: this.orderStatus,
      };
      this.loadStatus = "loading";
      getOrderList(query).then((res) => {
        res.data.records.forEach((arr) => {
          this.orderData.push(arr);
        });
        
        this.page = {
          current: res.data.current,
          size: res.data.size,
          total: res.data.total,
          pages: res.data.pages,
        };
        if(!res.data.records.lenght){
          this.loadStatus ="nomore"
        }else{
        this.loadStatus =
          this.page.pages % this.page.current ? "loadmore" : "nomore";
        }
        this.page.current+=1
      });
    },
    toPay(item) {
      // 清空表单
      this.setInfoForm({});
      this.$isAppTo('/pages/checkCredit/payment',{orderId:item.id})
    },
    onclickToApp(){
      this.$isAppTo('/pages/checkCredit/infoForm')
    },
    toReport(item){
      uni.navigateTo({
        url: `/pages/index/report?orderId=${item.id}`,
      });
    },
    toService() {
      uni.navigateTo({
        url: "/pages/user/customerService",
      });
    },
    onClickCance(index) {
      console.log(this.orderData[index]);
      this.currenOrderID = this.orderData[index]["id"];
      this.showModal = true;
    },
    onConfirmCancelOrder() {
      cancelOrder(this.currenOrderID).then((res) => {
        uni.showToast({
          title: "订单取消成功",
          duration: 2000,
        });
        this.fetchOrderListSearch();
      });
    },
    changeTab(index) {
      console.log("index",index);
      this.swiperCurrent = index;
      this.currentTab = index
      const status = {
        0: null,
        1: 0,
        2: 2,
        3: 4,
        4: 6,
      };
      this.orderStatus = status[index];
      this.page = {
        current: 1,
        size: 10,
        total: 0,
        pages: 0,
      },
      this.orderData=[]
      this.fetchOrderListSearch();
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.tabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.currentTab = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      if (this.page.pages >= this.page.current) {
        this.fetchOrderListSearch();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.order-container {
  height: 100vh;
  overflow: hidden;
  position: relative;
  & .go-select-box {
    position: absolute;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
    & .go-select-btn {
      width: 600rpx;
      height: 70rpx;
      line-height: 70rpx;
      color: white;
      border-radius: 60rpx;
      font-size: 28rpx;
      background-color: #3745eb;
    }
  }
}

.body-content {
  padding: 20rpx 0;
  & text:nth-child(2) {
    float: right;
    color: #f46c1e;
    font-size: 22rpx;
  }
}

.card-foot {
  width: 100%;
  overflow: hidden;
  & .foot-btn-box {
    float: right;
    width: 60%;
    padding: 20rpx 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
  }
}

.empty {
  width: 100%;
  padding: 80rpx;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  & > image {
    width: 300rpx;
    height: 300rpx;
  }
  & > text {
    line-height: 80rpx;
    color: #dbdbdb;
    font-size: 24rpx;
  }
}
</style>
